<template>
  <div>


  <myheader></myheader>

	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
            <img class="img-fluid" :src="imgsrc">

					</div>
					<div class="product-thumbnails"><a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a></div>

          	<div class="product-thumbnails">

						<span v-for='item in goodslist'>
						<a href="#" @click="getgoods(item.id)">
						<img class="mt-2 mr-2 img-fluid" :src="'http://127.0.0.1:8000/static/upload/'+ item.img"></a>
						</span>

					</div>

					<div>

						<Pagination v-model='pagination' @change='change' layout="pager,jumper" small></Pagination>

					</div>

				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
          <h2 class="mb-3 mt-0">商品名：{{ name }}</h2>
					<p class="lead mt-2 mb-3 primary-color">价格：{{ price }}</p>
					<h5 class="mt-4">商品简介</h5>
					<p>{{ desc }}</p>
<!--					<p>Suspendisse potenti. Nunc in libero luctus, sagittis leo sit amet, volutpat lacus. Quisque a porta risus. Integer aliquet nibh vitae vestibulum accumsan</p>-->
					<h5 class="mt-5">规格</h5>
          <p>颜色：{{ color }}</p>

          <p>号码：{{ size }}</p>

          <p>季节：{{ season }}</p>

<!--          <p>-->
<!--            {{ goodsparms.color }}-->
<!--            {{ goodsparms.size }}-->
<!--            {{ goodsparms.season }}-->
<!--          </p>-->



<!--					<p>Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>-->
					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>

					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->

					<a href="#" class="btn btn-full-width btn-lg btn-outline-primary">Add to cart</a></div>
			</div>
		</div>
	</section>

	<div class="divider"></div>


    <section class="products text-center">
		<div class="container">

      <textarea v-model="content"> </textarea>

      <br>
      <br>
      <Button color="blue" @click="comment">开始评论</Button>

      <br>
      <br>
	  <!-- :v-bang属性绑定向子组件传参 -->
      <comments :contentlist="this.contentlist" :myuser="this.myuser"></comments>
      <br>
      <br>

<!--      <ul>-->

<!--        <h3>评论列表</h3>-->
<!--        <li v-for="item in contentlist">-->
<!--          <p>{{ item.uid | myfilter }}:{{item.content}}</p>-->

<!--        </li>-->
        <Pagination v-model="pagination" @change="changge" layout="pager,jumper" small></Pagination>
<!--      </ul>-->


		</div>

	</section>

    <div class="divider"></div>


	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>

	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>


	</footer>

  </div>

</template>



<script>

  import myheader from "./myheader.vue";
  import comments from "./comments.vue";


export default {
  data () {
    return {
      msg: "这是一个变量",

      //商品id
      id:'',
      name:'',
      price:'',
      desc:'',
      color:'',
      size:'',
      season:'' ,
      img:'',

      //评论内容
      content:'',
      //评论列表容器
	    contentlist:[],
	    //用户信息字典
	    myuser:{},




      goodslist:[],
	    goodsitem:{},
	    goodsparms:{},

      imgsrc:'',

      pagination:{
		  page:1,
		  size:3,
		  total:5,



	  },


    }
  },
  //自定义过滤器
  filters:{

	  // //自定义方法
	  myfilter:function(value){

		  //通过key（用户id）取用户名
		  return window.that.myuser[value];
	  }

  },

  //注册组件标签
  components:{

  		'myheader':myheader,
      'comments':comments,


  },

  mounted:function(){

     window.that = this;


	  //调用用户列表
	  this.get_user();

	  //调用评论接口
    this.commentlist();




    //接收商品id
    var id = this.$route.query.id;
    console.log(id);

    this.id = id;

    //调用接口
    this.getdata();


    this.getgoods();


          // 请求商品接口
        this.axios.get('http://127.0.0.1:8000/goodslist/',{params:{page:1,size:3}}).then((res)=>{
            console.log(res);

          this.goodslist = res.data.data;
          this.imgsrc = 'http://127.0.0.1:8000/static/upload/'+this.goodslist[0].img

        });



},
  methods:{

    //分页
    changge(){
      		//发送请求
		      this.axios.get('http://localhost:8000/commentlist/',{params:{size:this.pagination.size,page:this.pagination.page,id:this.id}}).then((result) =>{


				  this.contentlist = result.data.commentlist;
          this.pagination.total = result.data.total;
            console.log(result);





      });

    },

	//调用所有用户列表
	get_user:function(){

		//发送请求
		this.axios.get('http://localhost:8000/userlist/').then((result) =>{

				  console.log(result);

				  //动态赋值

          for(let i=0,l=result.data.length;i<l;i++){

              this.myuser[result.data[i].id] = result.data[i].username;

          }
				  console.log(this.myuser)


      });

	  },


    //评论展示
    commentlist:function(){

            //发送请求
       this.axios.get('http://localhost:8000/commentlist/',{params:{uid:localStorage.getItem("uid"), id:this.$route.query.id}}).then((result) =>{

              console.log(result);
              this.contentlist = result.data.commentlist




      });

    },


    //评论方法
    comment:function(){


      if (this.content == ""){

        this.$Message('评论不能为空');

        return false

      }

             //发送请求
        this.axios.post('http://localhost:8000/insertcomment/',this.qs.stringify({content:this.content,uid:localStorage.getItem('uid'),gid:this.id})).then((result) =>{

                console.log(result);

				// if (result.data.code==400) {

					this.$Message(result.data.message);
				// }
				if (result.data.code==200){

                  // this.$Message(result.data.message)



				  //将评论内容和作者实时填充到评论容器中
					this.contentlist.unshift({"uid":localStorage.getItem("uid"),"content":this.content});


          this.content ='';
                  // location.reload()
        }
        });
    },
  	//商品信息接口
  	getdata:function(){


  		//发送请求
      this.axios.get('http://localhost:8000/goodinfo/',{params:{id:this.id}}).then((result) =>{

              console.log(result);

              this.name = result.data.name;
              this.desc = result.data.desc;
              this.price = result.data.price;
              this.img = result.data.img;

              var parms = result.data.parms;

              //转换类型
              parms = JSON.parse(parms);

              this.color = parms.color;
              this.size = parms.size;
              this.season = parms.season;
              // this.src = 'http://localhost:8000/static/upload/'+result.data.img;

              console.log(parms);



      });



  	},
    change(){

			this.axios.get('http://127.0.0.1:8000/goodslist/',{params:{page:this.pagination.page,size:this.pagination.size}}).then((res)=>{
				console.log(res);

				this.goodslist = res.data.data


			});

	  },

	  getgoods(id){
			this.axios.get('http://127.0.0.1:8000/goodsall/',{params:{id:id}}).then((res)=>{
				console.log(res);

				this.goodsitem = res.data.data;
				this.goodsparms = JSON.parse(res.data.data.parms);
				this.imgsrc = 'http://127.0.0.1:8000/static/upload/'+this.goodsitem.img
				// console.log(this.goodsparms)

			});
	  },


  }
}


</script>

<style>



</style>
